
<template>
	<div class="withdrawDeposit">
		<mt-navbar v-model="selected">
			<mt-tab-item id="1">资金提现</mt-tab-item>
			<mt-tab-item id="2">提现记录</mt-tab-item>
		</mt-navbar>
		<mt-tab-container v-model="selected">
			<mt-tab-container-item id="1">
				<!-- 提现记录 -->
				<div>
					<div class="alert-title">
						<span>1. 每天可提现一次(9:00-18:00)</span>
						<span>2. 提现后1-3个工作日到账</span>
						<span>3. 提现手续费相关规定</span>
						<span>（1）每次至少提现200元</span>
						<span>（2）提现200-500元，收1%手续费</span>
						<span>（3）提现501-1999元，收5元手续费</span>
						<span>（4）提现2000元以上，免手续费</span>
						<span>（5）提现金额必须是1的倍数</span>
						<span>（6）每月前两次本金提现免手续费</span>
						<span class="theme-color">VIP享受每月前四次本金提现免手续费</span>
					</div>
					<mt-field label="本金余额" disabled v-model="form.balance"></mt-field>
					<mt-field label="佣金余额" disabled v-model="form.servicefee"></mt-field>
					<mt-field label="手机号" disabled v-model="form.mobile"></mt-field>
					<mt-field label="姓名" disabled v-model="form.name"></mt-field>
					<mt-field label="银行名称" disabled v-model="form.bank"></mt-field>
					<mt-field label="银行账户" disabled v-model="form.bankNo"></mt-field>
					<mt-field label="提现本金" type="number" v-model="form.balanceMoney"></mt-field>
					<mt-field label="提现佣金" type="number" v-model="form.serviceFee"></mt-field>
					<!-- <mt-button type="primary" size="large" @click.native="doWithdraw">提现</mt-button> -->
					<mt-button type="danger" size="large" @click.native="doWithdraw" v-if="showBtn">提现</mt-button>
				</div>
			</mt-tab-container-item>
			<mt-tab-container-item id="2">
					<div v-for="(item, i) in list" v-if="list.length!==0" class="list-item">
						<div class="list-row">
							<div class="u-time">{{item.createtime | dateformat}}</div>
							<div class="u-status">{{item.remark}}</div>
						</div>
						<div class="list-row">
								<div>提现金额 <span class="money-color">{{item.withdrawMoney}}</span> 元</div>
								<div class="right-part">手续费 <span class="money-color">{{item.serviceFee}}</span> 元</div>
						</div>
						<div class="list-row">
								<div></div>
								<div class="right-part">实际返款 <span class="money-color">{{item.actualValue}}</span> 元</div>
						</div>
					</div>
					<div v-if="list.length===0" class="no-data">
						暂无记录
					</div>
			</mt-tab-container-item>
		</mt-tab-container>
		
		<!-- fixed -->
		<div class="fixed-nav">
			<index-footer></index-footer>
		</div>
	</div>
</template>

<script>
import IndexFooter from "@/components/base/IndexFooter";
import { userService } from "#/service";
import listMixins from "../../mixins/listMixins";
import baseMixins from "../../mixins/base";
import { Session } from "we-plugins";
import { MessageBox } from "mint-ui";
export default {
  name: "withdrawDeposit",
  data() {
    return {
      selected: "1",
      screen: {
        pageIndex: 0,
        pageSize: 222
      },
      list: [],
      form: {},
      showBtn: false
    };
  },
  watch: {
    selected(newVal) {
      if (newVal === "2") {
        // this.query();
        this.list = [{
        createtime: 0, 
        remark: 'xxxxx',
        withdrawMoney: 100,
        serviceFee: 90,
        actualValue: 200
      }]
      } else {
        this.getDetailData();
      }
    }
  },
  methods: {
    async query() {
      let scree = Object.assign({}, this.screen);
      return await userService.withdrawList({
        params: scree
      });
    },
    doWithdraw() {
      const balanceMoney = Number(this.form.balanceMoney || 0);
      const serviceFee = Number(this.form.serviceFee || 0);
      const money = balanceMoney + serviceFee;
      let cost;
      if (money < 200 || (money * 100) % 100 !== 0) {
        this.$toast({
          message: "每次至少提现200元且提现金额必须是整数！",
          position: "middle",
          duration: 2000
        });
        return;
      }
      if (
        this.form.balance < balanceMoney ||
        this.form.servicefee < serviceFee
      ) {
        this.$toast({
          message: "提现本金需要小于本金余额且提现佣金需要小于佣金余额！",
          position: "middle",
          duration: 2000
        });
        return;
      }
      if (money < 500) {
        cost = (money * 0.01).toFixed(2);
      } else if (money >= 500 && money <= 1999) {
        cost = 5;
      } else if (money >= 2000) {
        cost = 0;
      }
      MessageBox.confirm(
        `<span style="color:red;">本次提现金额${money}元，扣取手续费${cost}元</span>`
      ).then(action => {
        // if (action === 'confirm') {
        userService.buyerWithdrawApply({
          data: {
            balanceMoney,
            serviceFee,
            withdrawMoney: balanceMoney + serviceFee
          },
          success: res => {
            if (res.code === 0) {
              console.log(res, 777);
              // this.saveUserInfo(res.data)
            }
          }
        });
        // }
      });
    },
    getBalance() {
      userService.balance({
        success: res => {
          if (res.code === 0) {
            const { balance, servicefee } = res.data;
            this.form.balance = balance;
            this.form.servicefee = servicefee;
            this.$forceUpdate();
            if (balance + servicefee < 200) {
              this.showBtn = false;
              this.$toast({
                message: "本金加佣金的总额大于200才可以提现！",
                position: "middle",
                duration: 2000
              });
              return;
            }
          }
        }
      });
    },
    getDetailData() {
      const { mobile, name, bankcardState, buyerBankList } = Session.getItem(
        "user"
      );
      const { bankNo, bank } = buyerBankList[0] || {};
      this.form.mobile = mobile;
      this.form.name = name;
      if (!name || bankcardState !== 1) {
        this.showBtn = false;
        this.$toast({
          message: "先实名认证并绑定银行卡！",
          position: "middle",
          duration: 2000
        });
        return;
      }
      this.getBalance();
    }
  },
  created() {
    this.getDetailData();
  },
  mixins: [listMixins, baseMixins],
  components: {
    IndexFooter
  }
};
</script>

<style lang="less">
html,
body {
  background: #f5f5ff5 !important;
}
.withdrawDeposit {
  width: 100%;
  height: 100%;
  overflow: hidden;
	padding-bottom: 0.6rem;
	.alert-title {
		font-size: 0.12rem;
		padding: 0.1rem;
		span {
			display: block;
			margin-bottom: 0.08rem;
			&.theme-color {
				color: red;
			}
		}
	}
	.no-data {
		margin-top: 0.2rem;
		font-size: 0.16rem;
		text-align: center;
  }
  .list-item {
		border-bottom: 1px dashed #ccc;
    margin: 0.1rem;
		.list-row {
			font-size: 0.14rem;
			padding: 0.04rem;
			display: flex;
			div {
				flex: 1;
			}
			.u-time {
				color: #E43A45;
			}
			.u-status {
				text-align: right;
				color: #E43A45;
				font-weight: bold;
			}
			.font-small {
				text-align: right;
      }
      .right-part {
        text-align: right;
      }
      .money-color {
        color: #E43A45;
      }
		}
	}
}

</style>
